import React from 'react';
import { Menu } from 'antd';
import './SideContext.css';

interface SideContextProps {
  onMenuSelect: (key: string) => void;
}

const SideContext: React.FC<SideContextProps> = ({ onMenuSelect }) => {
  return (
    <div className="side-context-menu">
      <div className='side-context-title'>
        <span>添加成员</span>
      </div>
      <div className='side-context-content'>
      <Menu
        mode="inline"
        defaultSelectedKeys={['page1']}
        onSelect={({ key }) => onMenuSelect(key)}
        style={{margin:'12px -20px'}}
      >
        <Menu.Item key="page1" style={{marginBottom:'16px'}}>
          单个添加
        </Menu.Item>
        <Menu.Item key="page2"style={{ marginBottom:'16px' }}>
          快速添加
        </Menu.Item>
        <span style={{ display: 'block', width: '210px', height: '1px', backgroundColor: '#ccc', marginBottom: '16px' }}></span>
        <Menu.Item key="page3"style={{marginBottom:'16px'}}>
          邮箱邀请
        </Menu.Item>
        <Menu.Item key="page4">
          链接邀请
        </Menu.Item>
      </Menu>
      </div>
    </div>
  );
};

export default SideContext;
